import React, {Component} from 'react';
import NavBar from "../../../Components/NavBar";
import TabBar from "../../../Components/TabBar";
import {SearchOutlined,UserOutlined,PlusOutlined} from '@ant-design/icons';
import './index.css'


class Mine extends Component {
    state = {
        login: false,
        icons:[
            {icon:'icon-24gf-playCircle',title:'最近播放'},
            {icon:'icon-yinleliebiao',title:'最近播放'},
            {icon:'icon-shangchuanyunpan',title:'云盘'},
            {icon:'icon-ypurchased',title:'已购'},
            {icon:'icon-pengyoufill',title:'我的好友'},
            {icon:'icon-shoucang',title:'收藏和赞'},
            {icon:'icon-xinhao',title:'我的播客'},
            {icon:'icon-guanzi',title:'音乐罐子'},
        ]
    }
    render() {
        const {login,icons} = this.state;
        return (
            <div className={'mine_page'}>
                <NavBar>
                    <div></div>
                    <div><SearchOutlined /></div>
                </NavBar>
                <main>
                {/*    头像/ 立即登录*/}
                    <div className="avatar_wrapper">
                        <div className="avatar">
                            <UserOutlined />
                        </div>
                        <div className={'title'}>{login?'':'立即登录'}</div>
                    </div>
                    <div className={'icons'}>
                        <div className="wrapper">
                            {icons.map((icon,index)=><div className={'item'} key={index}>
                                <div className={'iconfont '+icon.icon}></div>
                                <div className={'title'}>{icon.title}</div>
                            </div>)}
                        </div>
                        <div className="add"><PlusOutlined /><span>音乐应用</span></div>
                    </div>
                </main>
                <TabBar></TabBar>
            </div>
        );
    }
}

export default Mine;